import { useState, useEffect } from 'react';
import Link from 'next/link';
import Layout from '../../components/Layout';
import SEO from '../../components/SEO';

export default function DocsList() {
  const [files, setFiles] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/docs')
      .then(res => res.json())
      .then(data => {
        if (data.error) {
          setError(data.error);
        } else {
          // 按文档名称排序并处理文件路径
          const sortedFiles = data.files.sort((a, b) => 
            a.name.localeCompare(b.name, 'zh-CN')
          ).map(file => ({
            ...file,
            path: file.path.replace(/\.md$/, ''),
            displayName: file.name.replace(/\.md$/, '')
          }));
          setFiles(sortedFiles);
        }
      })
      .catch(err => {
        console.error('Error fetching files:', err);
        setError('加载文件列表失败');
      });
  }, []);

  if (error) {
    return (
      <Layout documentMenu={[]}>
        <SEO 
          title="文档列表 - 小铭Ai梦想家"
          description="查看小铭Ai梦想家平台提供的所有量化交易相关文档"
          keywords="量化交易文档,AI投资教程,金融分析指南,交易策略"
          url="/docs"
        />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="bg-red-50 dark:bg-red-900 p-4 rounded-lg">
            <p className="text-red-600 dark:text-red-200">{error}</p>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout documentMenu={[]}>
      <SEO 
        title="文档列表 - 小铭Ai梦想家"
        description="查看小铭Ai梦想家平台提供的所有量化交易相关文档"
        keywords="量化交易文档,AI投资教程,金融分析指南,交易策略"
        url="/docs"
      />
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8">文档列表</h1>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {files.map((file, index) => (
            <Link
              key={index}
              href={`/docs/${file.path}`}
              className="block p-6 bg-white dark:bg-gray-800 rounded-lg hover:shadow-md transition-shadow duration-200"
            >
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                {file.displayName}
              </h2>
              {file.description && (
                <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
                  {file.description}
                </p>
              )}
            </Link>
          ))}
        </div>
      </div>
    </Layout>
  );
} 